<template>
  <div class="app-nav">
    <div class="app-nav-title">
      <span>应用注册</span>
      <span style="padding-right:8px;">
        <el-button size="mini" type="text" icon="el-icon-arrow-up" @click="goCloseAll()"></el-button>
        <el-button size="mini" type="text" icon="el-icon-arrow-down" @click="goOpenAll()"></el-button>
        <el-button size="mini" type="text" icon="el-icon-refresh" @click="getAll()"></el-button>
      </span>
    </div>
    <div class="app-nav-list">
      <el-tree
        :data="data"
        node-key="nodeKey"
        ref="appTree"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :default-expand-all="true"
        :highlight-current="true"
        :expand-on-click-node="false"
        :indent="10"
      >
        <span class="custom-tree-node" slot-scope="{node,data}">
          <span>
            <font-awesome-icon v-if="data.icon!=undefined && data.icon !=''" :icon="data.icon"/>
            <font-awesome-icon v-else-if="data.type=='group'" icon="object-group"/>
            <font-awesome-icon v-else-if="data.type=='area'" icon="bullseye"/>
            <font-awesome-icon v-else icon="users"/>
            {{data.name}}
          </span>
          <span class="icon-button">
            <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" v-if="data.type=='area'||data.type=='group'" @click.stop="add(node,data)"></el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" v-if="data.type=='group'||data.type=='app'" @click.stop="del(node,data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],

      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    init() {
      this.data = [];
    },
    handleNodeClick(data) {
      this.$emit("getInfo", data.id, data.type);
    },
    getAll() {
      this.data = [];
      this.$http({
        url: this.$URL_ADDR.core.app.all,
        method: "GET"
      }).then(resp => {
        this.data = resp.data;
      });
    },
    add(node, data) {
      console.debug("data", data);
      if (data.type == "group") {
        // var appTree = this.$refs.appTree;
        // console.debug(appTree);
        this.$http({
          url: "/core/api/app-apps",
          method: "POST",
          data: { name: "新应用", groupId: data.id }
        }).then(resp => {
          var re = resp.data;
          this.$refs.appTree.append(
            { id: re.id, type: "app", name: re.name },
            node
          );
        });
      }
    },
    del(node, data) {
      this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
        center: true
      }).then(() => {
        if (data.type == "app") {
          // var appTree = this.$refs.appTree;
          // console.debug(appTree);
          this.$http({
            url: "/core/api/app-apps/" + data.id,
            method: "DELETE"
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.$refs.appTree.remove(node);
          });
        }
      });
    },
    goOpenAll() {
      console.debug(this.$refs);
      for (var i = 0; i < this.$refs.appTree.store._getAllNodes().length; i++) {
        this.$refs.appTree.store._getAllNodes()[i].expanded = true;
      }
    },
    goCloseAll() {
      for (var i = 0; i < this.$refs.appTree.store._getAllNodes().length; i++) {
        this.$refs.appTree.store._getAllNodes()[i].expanded = false;
      }
    }
  }
};
</script>
<style scoped>
.app-nav-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
.icon-button .el-button + .el-button {
  margin-left: 5px;
}
</style>
